<script src="/js/jquery-3.1.0.min.js"></script>
<script src="/js/jquery.orgchart.js"></script>
<link rel="stylesheet" href="/css/jquery.orgchart.css">
<div class="row" style="height:100%;overflow:hidden;">
	<div class="col-lg-12" style="border-right:1px solid #e6e6e6;padding-right:0px;width:100%;height:100%">
		<div style="width:calc(100% - 270px);height:100%;position: absolute;left:0px;top:0px;overflow:hidden;">
			<h1 class="site-h1" style="background-color:#FFFFFF;margin-bottom:0px;">
				<#if type?? && type == "topic">${topic.title!''}<#elseif type?? && type == "scene">${scene.title!''}</#if>
				<span style="float:right;">
					<div class="layui-btn-group">
					
						<button class="layui-btn layui-btn-primary layui-btn-sm" onclick="$('#chart-container').css('zoom',parseFloat($('#chart-container').css('zoom')) + 0.1)">
							<i class="layui-icon">&#xe608;</i>
						</button>
						<button class="layui-btn layui-btn-primary layui-btn-sm" onclick="$('#chart-container').css('zoom',parseFloat($('#chart-container').css('zoom')) - 0.1)">
							<i class="layui-icon">&#xe63f;</i>
						</button>
						<button class="layui-btn layui-btn-primary layui-btn-sm" onclick="$('#chart-container').css('zoom',1)">
							<i class="layui-icon">&#xe669;</i>
						</button>
					</div>
					
					<button class="layui-btn layui-btn-primary layui-btn-sm" onclick="history.back();">
						返回
					</button>
				</span>
			</h1>
			<div class="ukefu-mrounds ukefu-ivr-design" id="chart-container" style="height:calc(100% - 51px);width:100%;overflow:auto;"></div>
		</div>
		
		<div style="width:265px;height:100%;overflow:hidden;position: absolute;right:0px;top:0px;border-left:5px solid #FFFFFF;">
			<h1 class="site-h1" style="background-color:#FFFFFF;margin-bottom:0px;">
				全局规则
				<span style="float:right;">
					<button class="layui-btn layui-btn-primary layui-btn-sm" href="/apps/xiaoe/mrounds/add.html?type=${type!''}&dataid=${dataid!''}&parentid=0" data-toggle="ajax" data-width="950" data-height="550" data-title="新增多轮对话节点" >
						添加
					</button>
				</span>
			</h1>
			<div class="orgchart" id="chart-gl-container" style="height:calc(100% - 51px);width:100%;overflow:auto;">
				<#if mroundQuestionList?? && mroundQuestionList?size gt 0>
		       	<#list mroundQuestionList as mroundQuestion>
		       		<#if mroundQuestion.parentid == "0">
		       		<div style="width:255px;" class="node">
					    <div class="title">
					        <i class="fa fa-users symbol"></i>
					        <div class="ukefu-mrounds-title">${mroundQuestion.name!''}</div>
					        <a href="/apps/xiaoe/mrounds/edit.html?id=${mroundQuestion.id!''}&dataid=${mroundQuestion.dataid!''}&type=topic" data-toggle="ajax" data-width="950" data-height="550" data-title="编辑节点" class="ukefu-ivr-design" title="编辑">
					            <i class="layui-icon"></i></a>
					        <a href="/apps/xiaoe/mrounds/delete.html?id=${mroundQuestion.id!''}&dataid=${mroundQuestion.dataid!''}&type=topic" data-toggle="tip" class="ukefu-ivr-design" title="请确认是否删除节点？">
					            <i class="layui-icon" style="color:red;">ဇ</i></a>
					    </div>
					    <div class="content">匹配规则：${mroundQuestion.title!''}</div>
					</div>
		       		</#if>
		       	</#list>
		       	</#if>
			</div>
		</div>
	</div>	
</div>
<script id="content" language="text/html">
<#if type?? && type == "topic">${topic.content?no_esc}<#elseif type?? && type == "scene">${scene.aireply?no_esc}</#if>
</script>
<script language="javascript">
	var temp = [
		<#if mroundQuestionList?? && mroundQuestionList?size gt 0>
       	<#list mroundQuestionList as mroundQuestion>
       		<#if mroundQuestion.id != mroundQuestion.dataid>
        	{
       		'id': "${mroundQuestion.id!''}",
   			'parentid': "<#if mroundQuestion.parentid??>${mroundQuestion.parentid!''}<#else>${mroundQuestion.dataid!''}</#if>",
			'name': '<div class="ukefu-mrounds-title">${mroundQuestion.name!''}</div><a href="/apps/xiaoe/mrounds/add.html?type=${type!''}&dataid=${dataid!''}&parentid=${mroundQuestion.id!''}" data-toggle="ajax" data-width="950" data-height="550" data-title="新增多轮对话节点" class="ukefu-ivr-design" title="新增多轮对话节点"><i class="layui-icon">&#xe61f;</i></a><a href="/apps/xiaoe/mrounds/edit.html?id=${mroundQuestion.id!''}&dataid=${dataid!''}&type=${type!''}" data-toggle="ajax" data-width="950" data-height="550" data-title="编辑${extention.extention!''}节点" class="ukefu-ivr-design" title="编辑"><i class="layui-icon">&#xe631;</i></a><a href="/apps/xiaoe/mrounds/delete.html?id=${mroundQuestion.id!''}&dataid=${dataid!''}&type=${type!''}" data-toggle="tip" class="ukefu-ivr-design" title="请确认是否删除节点？"><i class="layui-icon" style="color:red;">&#x1007;</i></a>',
	        'title': '匹配规则：${mroundQuestion.title!''}',
	        'children': []
        	},
        	</#if>
		</#list>
       	</#if>
      	];
	
	var result = [] ;
	function GetData(ivr,temp){
		var v = ivr ;
		var childIvr = GetByParentid(ivr.id,temp);
		if(childIvr.length > 0){
			for(var i in childIvr){
				v.children.push(GetData(childIvr[i],temp));
			}
		}
		return v ; 
	}
	function GetByParentid(id, arry) {
        var newArry = [];
        for (var i in arry) {
            if (arry[i].parentid == id)
                newArry.push(arry[i]);
        }
        return newArry;
    }
	for(var k in temp){
		if(temp[k].parentid=='${dataid!''}'){
			this.result.push(GetData(temp[k],temp));
		}
	}
	var datascource = {
			'id':'${dataid!''}',
			'name': '<div class="ukefu-mrounds-title"><#if type?? && type == "topic">${topic.title!''}<#elseif type?? && type == "scene">${scene.title!''}</#if></div><a href="/apps/xiaoe/mrounds/add.html?type=${type!''}&dataid=${dataid!''}&parentid=${dataid!''}" data-toggle="ajax" data-width="950" data-height="550" data-title="新增多轮对话节点" class="ukefu-ivr-design" title="新增多轮对话节点"><i class="layui-icon">&#xe61f;</i></a><a href="/apps/xiaoe/mrounds/edit.html?id=${dataid!''}&dataid=${dataid!''}&parentid=${dataid!''}&type=${type!''}" data-toggle="ajax" data-width="950" data-height="550" data-title="编辑${extention.extention!''}节点" class="ukefu-ivr-design" title="编辑"><i class="layui-icon">&#xe631;</i></a>',
	        'title': $('#content').html(),
	        'children': result
	};
	$('#chart-container').orgchart({
	    'data': datascource,
	    'nodeContent': 'title',
	    'draggable': true,
	    'dropCriteria': function($draggedNode, $dragZone, $dropZone) {
	        if ($draggedNode.find('.content').text().indexOf('manager') > -1 && $dropZone.find('.content').text().indexOf('engineer') > -1) {
	            return false;
	        }
	        return true;
	    }
	}).children('.orgchart').on('nodedropped.orgchart',
		function(event) {
		//拖拽功能
	   	 console.log('draggedNode:' + event.draggedNode.children('.title').text() + ', dragZone:' + event.dragZone.children('.title').text() + ', dropZone:' + event.dropZone.children('.title').text());
	   	 var draggedNodeId = event.draggedNode.find('.id').prevObject[0].id;
	   	 var dropZoneId = event.dropZone.find('.id').prevObject[0].id;
	   	 location.href = "/apps/xiaoe/mrounds/drag.html?dataid=${dataid!''}&parentid=${dataid!''}&type=${type!''}&source="+draggedNodeId+"&to="+dropZoneId ;
	});
</script>
